<template>
   <div class="yw-order-container yw-service">
     <van-nav-bar title="我的服务" left-text="" left-arrow class="icon-return" @click-left="$router.push({name:'centerAll'})">
        <van-icon name="search" slot="right" @click="serviceHelpDetail"/>
      </van-nav-bar>
      <!-- 已认证服务 -->
      <ul class="content">
        <p class="icons_line icons_sure color-3">
          <img class="rz-img fl" src="../assets/image/service/icon_yyz.png" alt="">
          <em class="zi font-3">已认证服务</em>
        </p>
        <div class="next clearfix">
          <p class="arrayNull" v-if="certifiedList.length==0">暂无数据</p>
          <li v-for="(item,index) in certifiedList" :key="index" v-else>
            <p class="position-r" @click="listentoServiceEvent(item.serviceId)">
              <img v-if="item.onlineStatus == 0" :src="$imgPath(item.serviceLogo)" />
              <img v-else :src="$imgPath(item.serviceLogoNone)" />
              <!-- <span class="icons_sign">认证中</span> -->
            </p>
            <p class="word">{{item.serviceName}}</p>
            <p  :class="[item.onlineStatus == 0 ? 'icons_eye' : 'icons_eye_gray' ]" @click="hidderService(item)"></p>
          </li>
        </div>
      </ul><!-- 已认证 end// -->
      <!--  未认证服务 -->
      <div class="clearfix wei-sx">        
        <ul class="content" v-for="(item,index) in unauthorizedList" :key="index" v-if="item.listService.length > 0">
          <p class="icons_line icons_sure color-3 icon-border-left">
            <em class="zi2 font-3 ">{{item.name}}</em>
          </p>
          <div class="next clearfix">
            <li v-for="(itemList,indexList) in item.listService" :key="indexList">
              <p class="position-r" v-if="itemList.serviceStatus == 0 && itemList.serviceStatus !=''" @click="audit()">
                <img :src="$imgPath(itemList.serviceLogo)" />
                <span class="icons_sign" v-if="itemList.serviceStatus == 2">认证失败</span>
                <span class="icons_sign">认证中</span>          
              </p>
              <p class="position-r" v-else  @click="listentoServiceEvent(itemList.serviceId)">
                <img :src="$imgPath(itemList.serviceLogo)" />
                <span class="icons_sign" v-if="itemList.serviceStatus == 2">认证失败</span>    
              </p>
              <p class="word">{{itemList.serviceName}}</p>
            </li>
          </div>
        </ul><!-- 未认证服务 end// -->
      </div>
          
  </div>         
</template>
<script>
import apiHttp from '../api/index'
  export default {
  data() {
    return {
     /*  czxy:false, */
      active: 2,
      filter: false,
      certifiedList:[],
      unauthorizedList:[]
    }
  },
  components:{

  },
  mounted(){
    this.certified()
    this.unauthorized()
  },
  methods: {
    // 跳转到认证服务页面
    listentoServiceEvent(serviceId) {
      this.$router.push({
          name:'certification',
          params:{
            serviceId:serviceId
          }
      });
    },
    // 跳转到认证中页面
    audit(){
      this.$router.push({
        name:'audit'
      })
    },
    // 已认证的服务
    certified(){
      let userId = '';
      if(this.userId){
          userId = this.userId
      }
      let params = {
          userId:userId
      }
      apiHttp.apiCenter.myService('',params,resp=>{
        if(resp.code == 200){
          this.certifiedList = resp.data
        }
      })
    },
    // 未认证服务
    unauthorized(){
      apiHttp.apiCenter.UnauthorizedService('',resp=>{
        if(resp.code == 200){
          for(let i = 0; i<resp.data.length; i++){
            this.unauthorizedList.push(resp.data[i])
          }
        }
      })
    },
    // 隐藏服务
    hidderService(item){
      let onlineStatus = ''
      if(item.onlineStatus == 0) {
        onlineStatus = 1
      }else{
        onlineStatus = 0
      }
      let parmes = {
        onlineStatus:onlineStatus,
        serviceId:item.serviceId
      }
      apiHttp.apiCenter.updateOnlineStatus(this.$qs.stringify(parmes),resp => {
        if(resp.code == 200){
          item.onlineStatus = onlineStatus
        }
      })
    },
    //跳到帮助页面
    serviceHelpDetail(){
      this.$router.push("/serviceHelp");
    }
  }
};
</script>
<style scoped>

.yw-service {
  background: #f5f5f5;
}
.content {
  background: #fff;
  padding: .3rem .6rem 0 .6rem;
}
.content .icons_sign {
  color: #fff;
  position: absolute;
  left: 0;
  right: 0;
  width: 100%;
  bottom: 0.27rem;
  z-index: 999;
  background: url('../assets/image/service/icon_service_sign2@2x.png') no-repeat center center;
  background-size: 2rem auto;
}
.content .next {
  padding: 0.6rem 0.6rem .6rem 0;
}
.content li {
  display: inline-block;
  width: 25%;
  max-height: 3.8rem;
  text-align: center;
  padding: 0 0 0.6rem 0;
}
.content li p.word {
  color: #333;
  font-size: 0.44rem;
  padding: 0.2rem 0 0.4rem;
}
.content img {
  max-width: 2rem;
}
.content .icons_img_gray {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 999;
  margin: 0 auto;
  width: 1.8rem;height: 1.8rem;
  background: #000 url('../assets/image/service/icon_jdqs@3x.png') no-repeat center center;
  background-size: cover;
  opacity: 0.5;
  border-radius: 50%;
}
.content .icons_line {
  line-height: 1rem;
}
.content .icons_sure {
  height: 1rem;
  overflow: hidden;
}
.content .icons_eye {
  width: 0.8rem;
  height: 0.62rem;
  margin: 0 auto;
  background: url('../assets/image/service/icon_eye_show@2x.png') no-repeat center center;
  background-size: cover;
}
.content .icons_eye_gray {
  width: 0.8rem;
  height: 0.62rem;
  margin: 0 auto;
  background: url('../assets/image/service/icon_eye_hide@2x.png') no-repeat center center;
  background-size: cover;
}
.wei-sx{
  margin-top: 0.4rem;
  width: 100%;
  height: auto;
}
.icon-border-left{
  border-left: .1rem solid #d84e4d;
  height: .8rem !important;
}
.rz-img{
  width: .8rem;
}
.zi{
  line-height: 1rem;
  padding-left: .3rem;
}
.zi2{
  line-height: .8rem;
  padding-left: .5rem;
}

</style>